
<template>
    <div class="AvartarDropDown">
        
      <div class="AvatarTopBox">

        <div class="avatar">
        <el-avatar :size="60" :src="circleUrl">{{ name }}</el-avatar>
        </div>
      
        <div class="RightBox">
         <span>{{username}}</span>
         <span>{{department}}</span>
        </div>
      </div>
  
      <div class="selectedBox">
       
        <div class="liBox" v-for="(item,index) in Options" :key="index">
        <span>{{item}}</span>
        </div>

      </div>

    </div>
  </template>
  <script>
  
  
  
  
  export default {
    name: 'AvatarDropDown',
    data() {
      return {
        Options:['设置','退出登录'],
        username:'小张',
        department:'财务部',

      };
    },
    components:{
     
    },
    methods: {
    
    }
  
  }
  </script>
  
  <style scoped>
  .AvatarTopBox{
   height: 100px;
   padding: 15px;
   background: rgb(95, 95, 249);
   display: flex;
  align-items: center;

  }
  .RightBox{
    margin-left: 10px;
  }
  .AvatarTopBox span{
     display: block;
     margin-bottom: 8px;
     color: aliceblue;
  }

  .selectedBox{
    display: flex;
    flex-direction: column;
  }
  .liBox{
    background: beige;
    height: 35px;
    line-height: 35px;
    padding-left: 20px;
  }
  .liBox:hover{
    background: rgb(157, 157, 157);
  }
  </style>